<template>
  <ImButton shape="circle" size="48" variant="text" @click="updateTheme">
    <svg
      viewBox="0 0 1024 1024"
      v-if="store.theme === 'dark'"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      p-id="10177"
      fill="currentColor"
      width="24"
      height="24">
      <path
        d="M676.010667 142.677333l-60.928 33.322667 60.928 33.322667 33.322666 60.928 33.322667-60.928 60.928-33.322667-60.928-33.322667-33.322667-60.928-33.322666 60.928z m-231.765334 34.730667A341.333333 341.333333 0 1 0 807.68 682.666667 384 384 0 0 1 426.666667 298.666667c0-41.813333 5.589333-82.645333 17.578666-121.258667zM85.333333 512C85.333333 276.352 276.352 85.333333 512 85.333333h73.984l-37.034667 64C524.245333 192 512 242.773333 512 298.666667a298.666667 298.666667 0 0 0 356.181333 293.12l71.765334-13.952-23.168 69.376C860.245333 816.512 700.458667 938.666667 512 938.666667 276.352 938.666667 85.333333 747.648 85.333333 512z m789.333334-238.250667l38.997333 71.253334 71.253333 38.997333-71.253333 38.997333-38.997333 71.253334-38.997334-71.253334L764.416 384l71.253333-38.997333 38.997334-71.253334z"
        p-id="10178"></path>
    </svg>

    <svg
      viewBox="0 0 1024 1024"
      v-else
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      p-id="11264"
      fill="currentColor"
      width="24"
      height="24">
      <path
        d="M512 85.333333a42.666667 42.666667 0 0 1 42.666667 42.666667v42.666667a42.666667 42.666667 0 1 1-85.333334 0V128a42.666667 42.666667 0 0 1 42.666667-42.666667zM85.333333 512a42.666667 42.666667 0 0 1 42.666667-42.666667h42.666667a42.666667 42.666667 0 1 1 0 85.333334H128a42.666667 42.666667 0 0 1-42.666667-42.666667z m725.333334 0a42.666667 42.666667 0 0 1 42.666666-42.666667h42.666667a42.666667 42.666667 0 1 1 0 85.333334h-42.666667a42.666667 42.666667 0 0 1-42.666666-42.666667z m-256 341.333333a42.666667 42.666667 0 1 0-85.333334 0v42.666667a42.666667 42.666667 0 1 0 85.333334 0v-42.666667z m228.864-130.133333a42.666667 42.666667 0 1 0-60.330667 60.330667l30.165333 30.165333a42.666667 42.666667 0 0 0 60.330667-60.330667l-30.165333-30.165333zM210.304 210.304a42.666667 42.666667 0 0 1 60.330667 0l30.165333 30.165333A42.666667 42.666667 0 0 1 240.469333 300.8l-30.165333-30.165333a42.666667 42.666667 0 0 1 0-60.330667zM300.8 783.530667a42.666667 42.666667 0 1 0-60.330667-60.330667l-30.165333 30.165333a42.666667 42.666667 0 1 0 60.330667 60.330667l30.165333-30.165333zM813.696 210.304a42.666667 42.666667 0 0 1 0 60.330667l-30.165333 30.165333a42.666667 42.666667 0 1 1-60.330667-60.330667l30.165333-30.165333a42.666667 42.666667 0 0 1 60.330667 0zM298.666667 512a213.333333 213.333333 0 1 1 426.666666 0 213.333333 213.333333 0 0 1-426.666666 0z"
        fill="#292929"
        p-id="11265"></path>
    </svg>
  </ImButton>
</template>

<script setup lang="ts">
import { useAppStore } from '@app/src/store/useApp';
const store = useAppStore();

const updateTheme = () => {
  store.setTheme(store.theme === 'dark' ? 'light' : 'dark');
};
</script>

<style scoped></style>
